<template>
  <view class="price-container">
    <!-- 实时价格 -->
    <view class="price-card">
      <view class="price-header">
        <text>实时金价</text>
        <text :class="['change', changeType]">
          {{ priceChange }}%
        </text>
      </view>
      <view class="price-display">
        <text class="currency">¥</text>
        <text class="amount">{{ currentPrice }}</text>
        <text class="unit">元/克</text>
      </view>
    </view>

    <!-- 价格走势图 -->
    <view class="chart-container">
      <image 
        src="/static/chart-placeholder.png" 
        mode="widthFix" 
        class="chart-img"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const currentPrice = ref(502.3)
const priceChange = ref(0.45)
const changeType = ref('rise')

onMounted(() => {
  // 模拟数据更新
  setInterval(() => {
    currentPrice.value = (502.3 + Math.random() * 2).toFixed(2)
    priceChange.value = (Math.random() * 0.5).toFixed(2)
    changeType.value = Math.random() > 0.5 ? 'rise' : 'fall'
  }, 3000)
})
</script>

<style lang="scss">
.price-container {
  padding: 40rpx;
  background: #f5f7fa;
}

.price-card {
  background: linear-gradient(135deg, #4CAF50, #8BC34A);
  border-radius: 24rpx;
  padding: 40rpx;
  color: white;
  
  .price-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;
    
    .change {
      font-size: 28rpx;
      &.rise { color: #FFEB3B; }
      &.fall { color: #FF5252; }
    }
  }
  
  .price-display {
    display: flex;
    align-items: baseline;
    
    .currency {
      font-size: 36rpx;
      margin-right: 10rpx;
    }
    
    .amount {
      font-size: 56rpx;
      font-weight: bold;
      margin: 0 10rpx;
    }
    
    .unit {
      font-size: 28rpx;
      opacity: 0.8;
    }
  }
}

.chart-container {
  margin-top: 40rpx;
  background: white;
  border-radius: 24rpx;
  padding: 20rpx;
  
  .chart-img {
    width: 100%;
  }
}
</style>